import { useState, useEffect } from 'react';
import { Card, Input, message, Row, Button } from 'antd';
import { PageContainer, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { queryKnowledgeDataDetail } from '@/services/knowledge';

import useDetailType from '@/hooks/useDetailType';

import styles from './index.less';
interface Props {
  name?: string;
}

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};

const KnowledgeDataDetail: React.FC<Props> = () => {
  const { goBack, params } = useDetailType<Partial<{ id: string }>>();
  const { id } = params;

  const [detail, setDetail] = useState<API.KnowledgeListItemById>();

  const pageQueryComing = async () => {
    if (id) {
      const res = await queryKnowledgeDataDetail({ id: Number(id) });
      if (!res.code && res.data) {
        setDetail(res.data);
      }
    }
  };

  useEffect(() => {
    pageQueryComing();
  }, []);

  return (
    <PageContainer>
      <div>
        <Card
          title={
            <h3>
              <ArrowLeftOutlined className={styles['title-icon']} onClick={goBack} />
              知识详情
            </h3>
          }
        >
          <div>
            <h2>{detail?.title}</h2>
            <div
              style={{
                whiteSpace: 'pre-wrap',
              }}
              dangerouslySetInnerHTML={{ __html: detail?.text || '' }}
            />
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default KnowledgeDataDetail;
